<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
	"http://www.w3.org/TR/html4/strict.dtd">
<html>
	
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
		<title>Calendar Sample: Desktop</title>				
		<style type="text/css">
			@import "../themes/claro/Calendar.css";
			@import "calendar.css";
			@import "../../../dojo/resources/dojo.css";
			@import "../../../dijit/themes/dijit.css";
			@import "../../../dijit/themes/claro/claro.css";
			
			.dijitCalendar .Highlighted {
				background-color: #fff0b4;
			}
			.dijitCalendar .Highlighted .dijitCalendarDateLabel {
				color: red !important;
				border: solid 1px #fff0b4;
			}
		</style>
	</head>
	
	<body class="claro">
		<script type="text/javascript" 
				data-dojo-config="async: true, parseOnLoad: true, paths : {'demo' : '../dojox/calendar/tests'}"
 				src="../../../dojo/dojo.js"></script>
		
			<script type="text/javascript">

			require(["dojo/ready", "dojo/_base/lang", "dojo/_base/sniff", "dojo/_base/array", "dojo/_base/fx", "dojo/dom-class", "dojo/on", 
			         "dojo/date/locale", "dojo/parser",	"dojo/dom", "dojo/dom-construct",	"dojo/store/Memory", 
			         "dojo/store/Observable",	"dojox/calendar/Calendar", "demo/DatePicker",  "dijit/TitlePane", 
			         "dijit/layout/BorderContainer", "dijit/layout/ContentPane", "dijit/form/CheckBox", 
			         "dijit/form/TextBox", "dijit/form/DateTextBox", "dijit/form/TimeTextBox", 
			         "dijit/form/Button", "dijit/form/ComboBox", "dijit/Menu", "dijit/MenuItem"	],

				function(ready, lang, has, arr, fx, domClass, on, locale, parser, dom, domConstruct,
					Memory, Observable, Calendar){

					ready(function(){
					
						// Display different hint every 10 seconds 
						var hints = [
							"Hint: Create an event by clicking and dragging on the grid while maintaining the control key",
							"Hint: Move an event by clicking on it and dragging it",
							"Hint: Resize an event by clicking on one of its ends and dragging it"
						];
						
						var hintIdx = 0;
						dom.byId("hint").innerHTML = hints[0];
												
						setInterval(function(){
							fx.fadeOut({node: "hint", 
								onEnd: function(){
									hintIdx = hintIdx+1>hints.length-1 ? 0 : hintIdx+1;
									dom.byId("hint").innerHTML = hints[hintIdx];
									fx.fadeIn({node: "hint"}).play(500); 									
								}
							}).play(500);
						}, 10000);
					
											
						calendar.set("cssClassFunc", function(item){
							// Use custom css class on renderers depending of a parameter (calendar).							
							return item.calendar == "cal1" ? "Calendar1" : "Calendar2"
						});
						
						// Calendar model creation
						var dataItemsTemplate = [
							{day: 1, start: [10,0], duration: 1400, calendar: "cal1"},
							{day: 2, start: [10,30], duration: 120, calendar: "cal2"},
							{day: 2, start: [12,0], duration: 240, calendar: "cal1"},
							{day: 3, start: [6,0], duration: 180, calendar: "cal2"},
							{day: 3, start: [0,0], duration: 2880, allDay: true, calendar: "cal1"}
						];
						var decorationItemsTemplate = [
							{day: 4, start: [10,10], duration: 360}
						];
						
						var dateClassObj = calendar.dateClassObj;

						var startOfWeek = calendar.floorToWeek(new dateClassObj());

						var createModel = function(modelTemplate){
							
							var someData = [];

							for (var id=0; id<modelTemplate.length; id++) {
								
								var evtTmpl = modelTemplate[id];
								var newObj = {
									id: id,
									summary: "New Event " + id,
									startTime: new dateClassObj(startOfWeek.getTime()),
									endTime: new dateClassObj(startOfWeek.getTime()),
									calendar: evtTmpl.calendar,
									allDay: evtTmpl.allDay
								};

								newObj.startTime = calendar.dateModule.add(newObj.startTime, "day", evtTmpl.day);
								newObj.startTime.setHours(evtTmpl.start[0]);
								newObj.startTime.setMinutes(evtTmpl.start[1]);

								newObj.endTime = calendar.dateModule.add(newObj.startTime, "minute", evtTmpl.duration);

								someData.push(newObj);
							}
							
							return someData;
						}
						
						
						var itemsData = createModel(dataItemsTemplate);
						var decorationItemsData = createModel(decorationItemsTemplate);
						var id = itemsData.length;
						var store = new Observable(new Memory({data: itemsData}));
						var decorationStore = new Observable(new Memory({data: decorationItemsData}));

						calendar.set("store", store);
						calendar.set("decorationStore", decorationStore);
						calendar.set("date", startOfWeek);
						
						// Enable creation of event interactively by ctrl clicking grid.
						var createItem = function(view, d, e){
						
							var cal1 = calendar1CB.get("checked");
							var cal2 = calendar2CB.get("checked");
						
							// create item by maintaining control key
							if(!e.ctrlKey || e.shiftKey || e.altKey || (!cal1 && !cal2)){
								return null;
							}
						
							// create a new event
							var start, end;
							var colView = calendar.columnView;
							var cal = calendar.dateModule;
							
							if(view == colView){
								start = calendar.floorDate(d, "minute", colView.timeSlotDuration);
								end = cal.add(start, "minute", colView.timeSlotDuration); 
							}else{
								start = calendar.floorToDay(d);
								end = cal.add(start, "day", 1);
							}
							
							var item = {
								id: id,
								summary: "New event " + id,
								startTime: start,
								endTime: end,
								calendar: cal1 ? "cal1" : "cal2",
								allDay: view.viewKind == "matrix"
							};
							
							id++;	
							
							return item;							
						};
						
						calendar.set("createOnGridClick", true);
						calendar.set("createItemFunc", createItem);						
						
						// filter out event according to their calendar
						var calendarVisibility = [true, true];
						
						var itemToRendererKindFunc = function(item){
							if(item.cssClass == "Calendar1" && calendarVisibility[0] ||
								item.cssClass == "Calendar2" && calendarVisibility[1]){
									return this._defaultItemToRendererKindFunc(item);
								}
							return null
						};
						
						calendar.columnView.set("itemToRendererKindFunc", itemToRendererKindFunc);
						calendar.columnView.secondarySheet.set("itemToRendererKindFunc", itemToRendererKindFunc);
						calendar.matrixView.set("itemToRendererKindFunc", itemToRendererKindFunc);
						
						// show context menu on right clicking an event
						calendar.on("itemContextMenu", function(e){
							dojo.stopEvent(e.triggerEvent);
							calendarContextMenu._openMyself({ 
								target: e.renderer.domNode, 
								coords: {x: e.triggerEvent.pageX, y: e.triggerEvent.pageY} 
							});
						});
						
						contextMenuDelete.on("click", function(){
							arr.forEach(calendar.selectedItems, function(item){
								calendar.store.remove(item.id);
							}); 							
						});
						
						// refresh item panel on event selection.
						var editedItem;
						
						var selectionChanged = function(item){
							
							var itemNull = item == null;
							
							var widgets = [itemSummaryEditor, itemStartDateEditor, itemStartTimeEditor, itemEndDateEditor,
								itemEndTimeEditor, calendarEditor, allDayCB, deleteItemButton, updateItemButton];
							
							arr.forEach(widgets, function(w){
								w.set("disabled", itemNull);
								w.set("value", null, false);
							});
							
							editedItem = itemNull ? null : lang.mixin({}, item); 
							
							if(!itemNull){
							
								var allDay = item.allDay === true;
								
								itemStartTimeEditor.set("disabled", allDay);
								itemEndTimeEditor.set("disabled", allDay);
																
								itemSummaryEditor.set("value", item.summary);
								itemStartDateEditor.set("value", item.startTime);
								itemStartTimeEditor.set("value", item.startTime);
								itemEndDateEditor.set("value", item.endTime);
								itemEndTimeEditor.set("value", item.endTime);
								calendarEditor.set("value", item.calendar == "cal1" ? "Calendar 1" : "Calendar 2");																					
								allDayCB.set("checked", allDay, false);
							}																						
						};
						
						calendar.on("change", function(e){							
							selectionChanged(e.newValue);							
						});	
						
						calendar.on("itemEditEnd", function(e){
							selectionChanged(e.item);
						});
						
						// configure item properties panel
						calendar.on("timeIntervalChange", function(e){
							datePicker.set("currentFocus", e.startTime, false);							
							datePicker.set("minDate", e.startTime);
							datePicker.set("maxDate", e.endTime);
							datePicker._populateGrid();
						});
						
						allDayCB.on("change", function(value){
							
							itemStartTimeEditor.set("disabled", value);
							itemEndTimeEditor.set("disabled", value);
							
							var d;
							if(value){
								d = itemStartTimeEditor.get("value");
								calendar.floorToDay(d, true);
								itemStartTimeEditor.set("value", d);
								d = itemEndTimeEditor.get("value");
								calendar.floorToDay(d, true);
								itemEndTimeEditor.set("value", d);
								
								if(!calendar.isStartOfDay(editedItem.endTime)){
									d = itemEndDateEditor.get("value");
									calendar.floorToDay(d, true);
									d = calendar.dateModule.add(d, "day", 1);
									itemEndDateEditor.set("value", d);
								}
								
							}else{
								editedItem.startTime.setHours(8);
								editedItem.endTime.setHours(9);
								itemStartTimeEditor.set("value", editedItem.startTime);
								itemEndTimeEditor.set("value", editedItem.endTime);
								d = itemEndDateEditor.get("value");
								calendar.floorToDay(d, true);
								d = calendar.dateModule.add(d, "day", -1);
								itemEndDateEditor.set("value", d);
							}
							
						});
						
						var mergeDateTime = function(isStart){
							var dateEditor = isStart ? itemStartDateEditor : itemEndDateEditor;
							var timeEditor = isStart ? itemStartTimeEditor : itemEndTimeEditor;
							var date = dateEditor.get("value");
							var time = timeEditor.get("value");
							date.setHours(time.getHours());
							date.setMinutes(time.getMinutes());
							return date;
						};
						
						updateItemButton.on("click", function(value){
							
							if (editedItem != null) {
								editedItem.summary = itemSummaryEditor.get("value");
								if(allDayCB.get("value")){
									if(!calendar.isStartOfDay(editedItem.startTime)){
										editedItem.startTime = calendar.floorToDay(itemStartDateEditor.get("value"), true);
									}
									if(!calendar.isStartOfDay(editedItem.endTime)){
										editedItem.endTime = calendar.floorToDay(itemEndDateEditor.get("value"), true);
									}			
									editedItem.allDay = true;						
								}else{
									editedItem.startTime = mergeDateTime(true);
									editedItem.endTime = mergeDateTime(false);
									delete editedItem.allDay;
								}
								
								var calValue = calendarEditor.get("value");
								editedItem.calendar = calValue == "Calendar 1" ? "cal1" : "cal2";
								calendar.store.put(editedItem);
							}
							
						});
						
						deleteItemButton.on("click", function(value){
							if (editedItem != null) {
								calendar.store.remove(editedItem.id);
							}
						});
																										
						// Synchronize date picker.																	
						datePicker.set("value", startOfWeek);
						datePicker.on("change", function(e){
							var d = datePicker.get("value");
							calendar.set("date", d);
						});						
										
						calendar1CB.on("change", function(v){
							calendarVisibility[0] = v;
							calendar.currentView.invalidateLayout();
						});
						
						calendar2CB.on("change", function(v){
							calendarVisibility[1] = v;
							calendar.currentView.invalidateLayout();
						});											
						
						// Hide loading panel when application is ready
						fx.fadeOut({
							node:"loadingPanel", 
							onEnd: function(node){
								node.parentNode.removeChild(node)
							}}).play(500);
						

					});
			});
			</script>
			
			<div id="loadingPanel" style="position:absolute;z-index:10;width:100%;height:100%;background:#ffffff">
				<span style="background: #DBEB8F;padding:2px">Loading...</span>
			</div>
			
			<div data-dojo-type="dijit.layout.BorderContainer" style="width:100%;height:100%" data-dojo-props="design:'sidebar', gutters:true" >
		    <div data-dojo-type="dijit.layout.ContentPane" style="width:200px" data-dojo-props="splitter:false, region:'leading'">
		        <div data-dojo-id="datePicker" data-dojo-type="demo.DatePicker" style="width:100%"></div>
						<div data-dojo-type="dijit.TitlePane" data-dojo-props="title:'Calendars', style:'margin-top:10px;'" >
							<div>
								<input type="checkbox" data-dojo-id="calendar1CB" data-dojo-type="dijit.form.CheckBox" checked="true"/>
								<label for="calendar1CB">Calendar 1</label>
							</div>
									
							<div style="margin-top:5px">
								<input type="checkbox" data-dojo-id="calendar2CB" data-dojo-type="dijit.form.CheckBox" checked="true"/>
								<label for="calendar2CB">Calendar 2</label>
							</div>
						</div>
						<div data-dojo-type="dijit.TitlePane" data-dojo-props="title:'Event properties', style:'margin-top:10px;'" >
							<div><span class="propertyTitle">Summary:</span></div>
							<div data-dojo-id="itemSummaryEditor" data-dojo-type="dijit.form.TextBox" style="width:165px;" data-dojo-props="disabled:true"></div>
							<div style="margin-top:10px"><span class="propertyTitle">Start:</span></div>
							<div>
								<div data-dojo-id="itemStartDateEditor" data-dojo-type="dijit.form.DateTextBox" style="width:90px;"  data-dojo-props="disabled:true"></div>
								<div data-dojo-id="itemStartTimeEditor" data-dojo-type="dijit.form.TimeTextBox" style="width:70px;" data-dojo-props="disabled:true" ></div>
							</div>
							<div style="margin-top:10px"><span class="propertyTitle">End:</span></div>
							<div>
								<div data-dojo-id="itemEndDateEditor" data-dojo-type="dijit.form.DateTextBox" style="width:90px;" data-dojo-props="disabled:true" ></div>
								<div data-dojo-id="itemEndTimeEditor" data-dojo-type="dijit.form.TimeTextBox" style="width:70px;" data-dojo-props="disabled:true" ></div>
							</div>
							<div style="margin-top:10px"><span class="propertyTitle">Calendar:</span></div>
							<select data-dojo-id="calendarEditor" data-dojo-type="dijit.form.ComboBox"  style="width:165px;" data-dojo-props="disabled:true" >
								<option>Calendar 1</option>
								<option>Calendar 2</option>									
							</select>
							<div style="margin-top:10px">
								<input type="checkbox" data-dojo-id="allDayCB" data-dojo-type="dijit.form.CheckBox" checked="false" data-dojo-props="disabled:true" />
								<label for="allDayCB">All day</label>
							</div>	
							<div style="margin-top:10px; text-align:right">
								<span style="text-align:left">
									<button data-dojo-id="deleteItemButton" class="deleteButton" data-dojo-type="dijit.form.Button"  data-dojo-props="disabled:true">Delete</button>
								</span>
								<span style="text-align:right">
									<button data-dojo-id="updateItemButton" data-dojo-type="dijit.form.Button" data-dojo-props="disabled:true" >Update</button>
								</span>
							</div>
						</div>
		    </div>
		    <div data-dojo-type="dijit.layout.ContentPane" data-dojo-props="splitter:false, region:'center'">
		        <div data-dojo-id="calendar" data-dojo-type="dojox.calendar.Calendar" 
					style="position:absolute;left:10px;top:10px;bottom:30px;right:10px">
					<div data-dojo-type="dijit.Menu" data-dojo-id="calendarContextMenu" style="display: none;">
		                <div data-dojo-type="dijit.MenuItem" data-dojo-id="contextMenuDelete" data-dojo-props="iconClass:'dijitIcon dijitIconDelete'">Delete</div>
		            </div>	
				</div>
				<div id="hint" style="position:absolute;left:10px;height:15px;bottom:10px;right:10px;color:#999;overflow:auto"></div>
		    </div>
		    
		</div>																		
						
	</body>
</html>
